'use client';

import type { IUser } from '@/interfaces';
import { formatDate } from '@/lib/tool';

export default function QueryUserInfo({ details }: { details: IUser }) {
  return (
    <div className="row">
      <div className="col">
        <div className="card">
          <div className="card-header bg-transparent text-muted">
            <i className="bi bi-info-square me-2"></i>
            {details.alias}
          </div>
          <div className="card-body">
            <div className="table-responsive">
              <table className="table table-hover align-middle table-striped">
                <thead>
                  <tr className="text-nowrap">
                    <th scope="col" className="fw-normal">
                      ID
                    </th>
                    <th scope="col" className="fw-normal">
                      {details.id}
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    ...new Set([
                      ...Object.keys(details),
                      ...Object.keys(details.details || []),
                    ]),
                  ]
                    .filter((item) => !['id', 'details'].includes(item))
                    .map((item) => {
                      return (
                        <tr key={item} className="text-nowrap">
                          <td>
                            {item === 'createdBy' && '创建用户'}

                            {item === 'updatedBy' && '更新用户'}

                            {item === 'creatorAlias' && '创建者别名'}

                            {item === 'updaterAlias' && '更新者别名'}

                            {item === 'createdOn' && '创建时间'}

                            {item === 'updatedOn' && '更新时间'}

                            {item === 'deleted' && '是否删除'}

                            {item === 'alias' && '别名'}

                            {item === 'username' && '用户名'}

                            {item === 'phone' && '手机号'}

                            {item === 'email' && '电子邮箱'}

                            {item === 'qqOpenId' && '腾讯 QQ openId'}

                            {item === 'qqUnionId' && '腾讯 QQ unionId'}

                            {item === 'wxOpenId' && '微信 openId'}

                            {item === 'wxUnionId' && '微信 unionId'}

                            {item === 'accountNonExpired' && '帐户未过期'}

                            {item === 'credentialsNonExpired' && '凭证未过期'}

                            {item === 'accountNonLocked' && '帐户未锁定'}

                            {item === 'enabled' && '账户未禁用'}

                            {item === 'lastLoginTime' && '上次登录时间'}

                            {item === 'personalizedSignature' && '个性签名'}

                            {item === 'smallAvatarUrl' && '小的头像'}

                            {item === 'mediumAvatarUrl' && '中等头像'}

                            {item === 'largeAvatarUrl' && '大的头像'}

                            {item === 'contacts' && '联系方式'}

                            {item === 'about' && '关于我'}
                          </td>
                          <td>
                            {item === 'createdBy' && details[item]}

                            {item === 'updatedBy' && details[item]}

                            {item === 'creatorAlias' && details[item]}

                            {item === 'updaterAlias' && details[item]}

                            {item === 'createdOn' && formatDate(details[item])}

                            {item === 'updatedOn' && formatDate(details[item])}

                            {item === 'deleted' && details[item] + ''}

                            {item === 'alias' && details[item]}

                            {item === 'username' && details[item]}

                            {item === 'phone' && details[item]}

                            {item === 'email' && details[item]}

                            {item === 'qqOpenId' && details[item]}

                            {item === 'qqUnionId' && details[item]}

                            {item === 'wxOpenId' && details[item]}

                            {item === 'wxUnionId' && details[item]}

                            {item === 'accountNonExpired' &&
                              (details[item] ? (
                                <i className="bi bi-check-lg text-primary"></i>
                              ) : (
                                <i className="bi bi-x-lg text-danger"></i>
                              ))}

                            {item === 'credentialsNonExpired' &&
                              (details[item] ? (
                                <i className="bi bi-check-lg text-primary"></i>
                              ) : (
                                <i className="bi bi-x-lg text-danger"></i>
                              ))}

                            {item === 'accountNonLocked' &&
                              (details[item] ? (
                                <i className="bi bi-check-lg text-primary"></i>
                              ) : (
                                <i className="bi bi-x-lg text-danger"></i>
                              ))}

                            {item === 'enabled' &&
                              (details[item] ? (
                                <i className="bi bi-check-lg text-primary"></i>
                              ) : (
                                <i className="bi bi-x-lg text-danger"></i>
                              ))}

                            {item === 'lastLoginTime' &&
                              formatDate(details[item])}

                            {item === 'personalizedSignature' && details.details
                              ? details.details[item]
                              : ''}

                            {item === 'smallAvatarUrl' && details.details
                              ? details.details[item]
                              : ''}

                            {item === 'mediumAvatarUrl' && details.details
                              ? details.details[item]
                              : ''}

                            {item === 'largeAvatarUrl' &&
                              (details.details ? details.details[item] : '')}

                            {item === 'contacts' &&
                              (details.details
                                ? (details.details[item] || [])
                                    .map(
                                      (value) => `${value.key}(${value.val})`,
                                    )
                                    .join(',')
                                : '')}

                            {item === 'about' && (
                              <div
                                className="clearfix text-break content-layer"
                                dangerouslySetInnerHTML={{
                                  __html: details.details
                                    ? details.details[item] || ''
                                    : '',
                                }}
                              ></div>
                            )}
                          </td>
                        </tr>
                      );
                    })}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
